<div>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-md-4 control-label">
        Enabled
      </label>
      <div class="col-md-8">
        <input type="checkbox" [disabled]="!canEdit" name="enabledPassword" [(ngModel)]="config.enabled">
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">
        Users
      </label>
      <div class="col-md-8">

        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Permission</th>
              <th>
                <button class="btn btn-xs" [disabled]="!canEdit" (click)="addUser()"><i class="fa fa-plus-circle"></i>
                </button>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let u of config.users; let idx = index;">
              <td>
                <input type="text" [disabled]="!canEdit" name="{{idx}}username" class="form-control" [(ngModel)]="u.username" />
              </td>
              <td>
                <input type="text" [disabled]="!canEdit" name="{{idx}}resources" class="form-control" [(ngModel)]="u.resources" />
              </td>
              <td>
                <button class="btn btn-xs btn-danger" [disabled]="!canEdit" (click)="removeUser(idx)"><i class="fa fa-remove"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>